//1.引入样式表
//公用样式 
require('../../assets/css/index.less');
require('../../assets/fonts/iconfont.css');

// 引入weUI
//引入样式
require('../../lib/weui/weui.css');
//引入js库
let weui = require('../../lib/weui/weui.js');


// 当前页面样式
require('./personal.less')

//2.引入工具函数 utils
const dom = require('../../utils/dom');
const https = require('../../utils/https');
const local = require('../../utils/local');

// 3.当前页面的js
dom.ready(function() {
    // 返回按钮点击事件
    dom.addEvent('#backBtn', function() {
        location.href = 'my.html'
    })


    // 功能一: 图像上传简单交互
    //点击图像让input进行click事件
    dom.addEvent("#picBtn", function() {
        // 展开对象--作用查看当前指定对象身上有哪些属性和方法
        // console.dir(dom.getEle("#fileBtn"));
        dom.getEle('#fileBtn').click();
    })

    //功能二: 头像上传实现--基本功能
    // 注册file监听改变事件
    let imgUrl
    dom.addEvent("#fileBtn", function() {
        // console.dir(this);
        dom.upLoadPic('/api/shared/uploadPortrait', 'file', this.files[0], function(res) {
            let { errno, data } = res;
            if (errno == 0) {
                dom.getEle('#picBtn').src = 'http://fitness.h5.itsource.cn:3701' + data.url;
                imgUrl = data.url
            }
        })
    }, 'change')

    // 点击上传
    // dom.addEvent("#fileBtn",function(){
    //     // 1.获取当前上传的文件源
    //     let file=this.files[0];//只上传一个数据

    //     // 2.拼接指定解构
    //     //  1)创建formData实例
    //     let fd=new FormData();
    //     fd.append('file',file)

    //     // 3.发送ajax
    //     https.post('/api/circles/uploadImg',fd,function(res){
    //         // console.log(res);
    //         let {errno,data}=res;
    //         // 判断
    //         if(errno==0){
    //             // 渲染图形到指定位置--#picBtn
    //             dom.getEle('#picBtn').src='http://fitness.h5.itsource.cn:3701'+data.url
    //         }
    //     })
    // })


    // 选择性别
    dom.addEvent("#sexBtn", function() {
        // console.log("111");
        weui.picker([{
                label: '男',
                value: 0,
            },
            {
                label: '女',
                value: 1
            }
        ], {

            onConfirm: function(result) {
                console.log(result)
                console.log(result[0].label);

                dom.getEle('#sexTxt').innerHTML = result[0].label
            },
            title: '性别选择'
        })

    })


    //选择生日
    dom.addEvent('#birBtn', function() {
            weui.datePicker({
                start: 1960,
                end: new Date().getFullYear(),
                // onChange: function (result) {
                //     console.log(result);
                // },
                onConfirm: function(result) {
                    console.log(result);
                    let birDate = result.map(v => dom.formData(v.value)).join('-')
                    dom.getEle('#birTxt').innerHTML = birDate
                },

                title: '生日选择'
            });
        })
        //   省份
    let provlaue;
    dom.addEvent('#proBtn', function() {
        https.get('/api/shared/province', function(res) {
            console.log(res);
            // 解构赋值
            let { errno, data } = res
            if (errno == 0) {
                let proDate = data.map(function(v) {
                    return {
                        value: v.id,
                        label: v.name
                    }
                })
                console.log(proDate);
                weui.picker(
                    proDate, {

                        onConfirm: function(result) {
                            console.log(result)
                            console.log(result[0].label);

                            dom.getEle('#proTxt').innerHTML = result[0].label;
                            provlaue = result[0].value
                        },
                        title: '省份选择'
                    })
            }
        })
    })

    // 城市
    let cityDate
    dom.addEvent('#cityBtn', function() {
        if (provlaue) {
            https.get('/api/shared/city?provinceId=' + provlaue, function(res) {
                console.log(res);
                // 解构赋值
                let { errno, data } = res
                if (errno == 0) {
                    let proDate = data.map(function(v) {
                        return {
                            value: v.id,
                            label: v.name
                        }
                    })
                    console.log(proDate);
                    weui.picker(
                        proDate, {

                            onConfirm: function(result) {
                                console.log(result)
                                console.log(result[0].label);

                                dom.getEle('#cityTxt').innerHTML = result[0].label;
                                cityDate = result[0].value

                            },
                            title: '城市选择'
                        })
                }
            })
        } else {
            weui.alert('请先输入省份')
        }

    })

    // 个人简介
    dom.addEvent('#briefBtn', function() {
        let len = this.value
            // console.log(len.length);
        dom.getEle('#briefTxt').innerHTML = len.length
        if (len.length > 200) {
            dom.getEle('#briefBtn').value = this.value.slice(0, 200)
            dom.getEle('#briefTxt').innerHTML = 200
        }
    }, 'input')

    // 保存修改个人信息

    dom.addEvent('#saveBtn', function() {
        let info = {
            nickName: dom.getEle('#userName').value,
            gender: dom.getEle('#sexTxt').innerHTML == '女' ? 1 : 0,
            provinceId: provlaue,
            cityId: cityDate,
            birthday: dom.getEle('#birTxt').innerHTML,
            imgUrl: imgUrl,
            sign: dom.getEle('#briefBtn').value,
        }

        https.post('/api/user/changeInfo', info, function(res) {

            if (res.errno == 0) {
                //提示
                console.log(res.data);
                weui.toast('保存成功', 3000);
                //更新token
                local.set('tk', res.data.token)
                    //跳转到 我的页面
                location.href = 'my.html'
            }
        })
    })


    // 把本地的渲染到网页中
    function rander() {
        let {
            imgUrl,
            nickName,
            gender,
            birthday,
            provinceId,
            cityId,
            sign
        } = local.get('userData');

        dom.getEle('#picBtn').src = 'http://fitness.h5.itsource.cn:3701' + imgUrl
        dom.getEle('#userName').value = nickName
        dom.getEle('#sexTxt').innerHTML = gender == 0 ? '男' : '女'
        dom.getEle('#birTxt').innerHTML = birthday
        dom.getEle('#briefBtn').value = sign;//个人简介

        https.get('/api/shared/province', function(res) {
            console.log(res);
            if (res.errno == 0) {
                let pData = res.data.filter(function(v) {
                    return v.id == provinceId
                })

                dom.getEle('#proTxt').innerHTML = pData[0].name
                    // 再把信息传到全局中
                provlaue = {
                    value: pData[0].id,
                    label: pData[0].name
                }
                https.get('/api/shared/city?provinceId=' + pData[0].id, function(res) {
                    console.log(res);
                    let cDate = res.data.filter(function(v) {
                        return v.id == cityId
                    })

                    dom.getEle('#cityTxt').innerHTML = cDate[0].name
                        // 再把信息传到全局中
                    cityDate = {
                        value: cDate[0].id,
                        label: cDate[0].name
                    }
                })
            }
        })
    }
    rander()
})